<template>
	<view class="">
		<view class="audit">
			<view class="audit_bg">
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/mine_statusbg.png" mode="widthFix"></image>
				<view class="audit_contant">
					<view class="left">
						<image v-if="!nosubmit" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_wtj01.png" mode=""></image>
						<image v-else-if="nosubmit && submitinfo.state == 2" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_sb01.png" mode=""></image>
						<image v-else-if="nosubmit && !submitinfo.state" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_shz01.png" mode=""></image>
						<image v-else-if="nosubmit && submitinfo.state == 1" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_tg01.png" mode=""></image>
						<image v-else src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/renwu_bohui.png" mode=""></image>
						<view class="left_info">
							<view v-if="!nosubmit" class="top">未提交</view>
							<view v-else-if="nosubmit && submitinfo.state == 2" class="top">审核不通过</view>
							<view v-else-if="nosubmit && !submitinfo.state" class="top">审核中</view>
							<view v-else-if="nosubmit && submitinfo.state == 1" class="top">审核通过</view>
							<view v-else class="top">已驳回</view>
							<view v-if="!nosubmit" class="bot">您发布的任务还未提交</view>
							<view v-else-if="nosubmit && submitinfo.state == 2" class="bot">对不起，审核不通过，感谢使用平台</view>
							<view v-else-if="nosubmit && !submitinfo.state" class="bot">任务正在审核中，请耐心等候</view>
							<view v-else-if="nosubmit && submitinfo.state == 1" class="bot">您发布的任务已审核通过</view>
							<view v-else class="bot">{{ submitinfo.refuse_reason }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交内容 -->
		<view class="submit_contant" v-if="!nosubmit || (nosubmit && submitinfo.state == 3)">
			<view class="submit_contant_contant">
				<view class="left">
					<i class="icon">&#xe83d;</i>
					提交内容
				</view>
				<view class="right"><textarea value="" v-model="content" placeholder-style="font-size:28upx;color:#999" placeholder="请输入本次提交的内容评述" /></view>
			</view>
			<view class="upimg">
				<view class="left">上传照片</view>
				<view class="right">
					<view class="right_pic">
						<view class="right_pic_p" v-for="(item, index) in imageSrc" :key="index">
							<!-- <image :src="'https://jifendui.oss-cn-beijing.aliyuncs.com/'+item" ></image> -->
							<image @tap="pri(index)" mode="aspectFill" :src="item + '?x-oss-process=image/auto-orient,1'"></image>
							<view class="delet" @tap="deletimg(index)"><image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/newPicter/delet.png" mode=""></image></view>
						</view>
						<image v-if="imageSrc.length < 4" @tap="upimg()" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/mine/rw_upimg.png" mode=""></image>
					</view>
					<view class="tips">仅支持jpg、png图片上传，大小不超过5M</view>
				</view>
			</view>
		</view>
		<!-- 审核不通过 -->
		<view class="sub_content" v-else>
			<view class="title">提交内容</view>

			<view class="sub_content_content">{{ submitinfo.content }}</view>
			<view class="sub_content_pic"><image v-for="(item, key_i) in submitinfo.img" :key="key_i" :src="item" mode="" @tap="previewImage(key_i)"></image></view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit_btn" @tap="addresult" v-if="!nosubmit || (nosubmit && submitinfo.state == 3)"><view class="btn">确认提交</view></view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools';
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: { loading, navigation },
	data() {
		return {
			loadflag: true,
			imageSrc: [],
			imageData: [],
			state_id: '',
			nosubmit: '', //没有提交
			submitinfo: {}, // 任务结果
			active_id: '',
			content: ''
		};
	},
	onLoad(option) {
		this.active_id = option.id;
	},
	mounted() {
		var that = this;
		that.getresult();
	},
	methods: {
		// 提交任务
		addresult() {
			this.ajax('order/addResult', {
				data: {
					active_id: this.active_id,
					content: this.content,
					img: this.imageSrc
				},
				success: res => {
					 // console.log (res);
					this.toast(res.msg);
					if (res.code) {
						uni.navigateBack({
							delta: 1
						});
					}
				}
			});
		},
		// 获取任务状态
		getresult() {
			this.ajax('active/getResult', {
				data: {
					active_id: this.active_id
				},
				success: res => {
					 // console.log (res);
					var that = this;
					if (!res.code) {
						this.nosubmit = 0;
						this.loadflag = false;
					} else {
						this.nosubmit = 1;
						var imgSrc = res.msg.img;
						var reg = RegExp('/?x-oss-process=image/');
						for (let i in imgSrc) {
							if (!reg.test(imgSrc[i])) {
								uni.getImageInfo({
									src: imgSrc[i],
									success: image => {
										if (image.width > image.height) {
											imgSrc[i] = imgSrc[i] + '?x-oss-process=image/rotate,0';
										}
									}
								});
							}
						}
						setTimeout(function() {
							 // console.log (imgSrc);
							that.submitinfo = res.msg;
							that.submitinfo.img = imgSrc;
							that.loadflag = false;
						}, 1000);
						// imgSrc.forEach((item,index)=> {
						// 	item = item.replace('http:', 'https:');
						// 	uni.getImageInfo({
						// 		src: item,
						// 		success: image => {
						// 			if (image.width > image.height) {
						// 				item = item + '?x-oss-process=image/rotate,0';
						// 			}
						// 		}
						// 	});
						// });
						// this.submitinfo = res.msg;
						// this.submitinfo.img = imgSrc
						// this.submitinfo.img[0] = this.submitinfo.img[0]+'?x-oss-process=image/rotate,0';
					}
				}
			});
		},
		// 图片旋转
		picRotate() {
			this.submitinfo.img.forEach(item => {
				uni.getImageInfo({
					src: item,
					success: function(image) {
						 // console.log (image);
						 // console.log (image.width);
						 // console.log (image.height);
						item = item + '?x-oss-process=image/rotate,90';
						 // console.log (item);
						// let img = new Image()
						// img.src = image.path
						// let canvas = document.createElement('canvas');
						// let ctx = canvas.getContext('2d')
						// canvas.width = image.width;
						// canvas.height = image.height;
						// ctx.drawImage(img, 0, 0, width, height)
						// canvas.toBlob()
						//  // console.log (canvas)
					}
				});
			});
			 // console.log (this.submitinfo);
		},
		tostatus() {
			uni.navigateTo({
				url: '/pageA/order/taskstatus'
			});
		},
		deletimg(key) {
			this.imageSrc.splice(key, 1);
			this.imageData.splice(key, 1);
		},
		previewImage(key) {
			uni.previewImage({
				current: key,
				indicator: 'default',
				urls: this.submitinfo.img
			});
		},
		pri(key) {
			uni.previewImage({
				current: key,
				indicator: 'default',
				urls: this.imageSrc,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						 // console.log ('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						 // console.log (err.errMsg);
					}
				}
			});
		},
		upimg() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					var sys_info = uni.getSystemInfoSync();
					if (sys_info.version) {
						uni.showLoading({
							title: '图片上传中'
						});
						var arr = res.tempFilePaths[0].split('/');
						var filename = arr[arr.length - 1];
						this.oss_upload(res, filename, {
							success: res => {
								var src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + filename;
								// this.header_img = filename;
								this.imageSrc = this.imageSrc.concat(src);
								uni.hideLoading();
							},
							fail: ress => {}
						});
					} else {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								//  // console.log (base64,111)
								this.header_img = base64;
								this.img_type = base64.split(';')[0].split('/')[1];
								uni.showLoading({
									title: '图片上传中'
								});
								// 获取图片信息
								//获取文件名称
								var arr = res.tempFilePaths[0].split('/');
								var filename = arr[arr.length - 1];
								var timestamp = new Date().getTime();
								var name = timestamp + '.' + this.img_type;
								this.oss_upload(res, name, {
									success: res => {
										var src = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + name;
										// this.header_img = filename;
										this.imageSrc = this.imageSrc.concat(src);
										uni.hideLoading();
									},
									fail: ress => {}
								});
							})
							.catch(error => {
								console.error(error);
							});
					}
				}
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f2f2f2;
}
</style>
<style lang="less" scoped>
@import url('../../static/less/pageA/order/submit.less');
</style>
